<div class="block-content upper-index no-padding">
<h1>Mobile template classes</h1>
	
<div class="block-controls">
	<ul class="controls-buttons">
		<li><b>Required files:</b><br>
		common.css, mobile.css</li>
		<li class="sep"></li>
		<li><b>Available in:</b><br>
		mobile</li>
	</ul>
</div>
</div>

<div class="block-content no-title">
<h2>Apple generic styles</h2>

<h4>Simple menu ("edge to edge")</h4>

<p>This is the standard iPhone menu, which goes from one side of the screen to another. It includes some custom styles for secondary data/links.</p>

<pre class="brush: html;">
&lt;ul class="edgeToEdge"&gt;
	&lt;li&gt;Label One&lt;/li&gt;
	&lt;li&gt;Label Two&lt;span class="secondary"&gt;iPod touch&lt;/span&gt;&lt;/li&gt;
	&lt;li&gt;Label Three&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Label Four&lt;span class="secondary"&gt;Apple Store&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;Label Five&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Label Six&lt;span class="number"&gt;25&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;Label Seven&lt;span class="number"&gt;2&lt;/span&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>

<hr>

<h4>Block menu ("rounded rectangle")</h4>

<p>Another the standard iPhone menu, in a rounded rectangle box. It also includes some custom styles for secondary data/links.</p>

<pre class="brush: html;">
&lt;ul class="roundRectangle"&gt;	
	&lt;li&gt;Label One&lt;span class="secondary"&gt;touch&lt;/span&gt;&lt;/li&gt;
	&lt;li&gt;Label Two&lt;span class="secondary"&gt;nano&lt;/span&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Label Three&lt;span class="secondary"&gt;classic&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
	&lt;li&gt;&lt;a href="#"&gt;Label Three&lt;span class="showArrow secondary"&gt;iMac&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</pre>
</div>